import {View, ScrollView, Text, Image, Button, Input} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React from 'react';
import {connect} from 'react-redux';
import * as T from './types';
import './index.less';
import actions from './actions';
import {store2Props} from './selectors';
import config from '@/service/config';
import * as sdk from 'api/fetch';
import headPic from '@/assets/image/ipland/headPic.png';
import camera from '@/assets/image/ipland/camera.png';
import rightIcon from '@/assets/image/ipland/right.png';
import {AtIcon} from 'taro-ui';
import 'taro-ui/dist/style/components/icon.scss';
//@ts-ignore
actions().actions.loadReducer();
//@ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class accountInformation extends React.Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  componentWillUnmount() {
    this.props.actions.clean();
  }

  componentWillMount(): void {
    this.props.actions.init();
  }

  componentDidShow() {
    this.props.actions.action.getMemberBase();
  }

  handleChangeAvatar = async (e) => {
    let {
      detail: {avatarUrl},
    } = e;
    // 获取上传Token
    let {data} = await sdk.rzget('oss/sign', {});
    Taro.uploadFile({
      url: config.ossHost,
      filePath: avatarUrl,
      name: 'file', // 必须填file。
      formData: {
        OSSAccessKeyId: data.accessid,
        policy: data.policy,
        signature: data.signature,
        key: `itsource/${avatarUrl.slice(avatarUrl.length / 2)}`,
        // 'x-oss-security-token': securityToken // 使用STS签名时必传。
      },
      success: async (res) => {
        console.log(res, '过来1');
        if (res.statusCode === 204) {
          avatarUrl = `${config.ossHost}/itsource/${avatarUrl.slice(avatarUrl.length / 2)}`;
          this.props.actions.action.setGameUserInfo({nickName: this.props.main.customer.name, headPortrait: avatarUrl});
        }
      },
      fail: (err) => {
        Taro.showToast({
          title: '上传失败',
          icon: 'none',
          mask: true,
        });
      },
    });
  };

  render() {
    // let {pictureUrl} = this.state;
    const {
      main: {customer, memberInfo, defaultName, defaultPictureUrl},
      actions: {action},
    } = this.props;
    if (!customer || !memberInfo) return;
    let memberName = '';
    let memberCardNum = '';
    if (memberInfo.isAquamarineMember) memberName = '蓝晶会员';
    if (memberInfo.isCrystalMember) memberName = '赤晶会员';
    if (memberInfo.isAquamarineMember && memberInfo.isCrystalMember) memberName = '双重会员';
    if (memberInfo.aquamarineMembershipCardNumber) memberCardNum = memberInfo.aquamarineMembershipCardNumber;
    if (memberInfo.crystalMembershipCardNumber) memberCardNum = memberInfo.crystalMembershipCardNumber;
    if (memberInfo.dualMembershipCardNumber) memberCardNum = memberInfo.dualMembershipCardNumber;
    return (
      <View className="packageIAccountInformation">
        <View className="uesrImgBox">
          <Button
            className="avatar"
            open-type="chooseAvatar"
            onChooseAvatar={(e) => {
              this.handleChangeAvatar(e);
            }}
          >
            <Image className="uesrImg" src={defaultPictureUrl || ''} mode="aspectFill" />
          </Button>
          <Image className="btn1" src={camera} mode="widthFix" />
        </View>
        <View className="infoBox">
          <View className="con">
            <View className="con-item">
              <View className="con-item-label">名字</View>
              <View className="con-item-infoBox">
                <Input
                  confirmType="done"
                  style={{textAlign: 'right'}}
                  className="con-item-infoBox-text"
                  value={defaultName}
                  maxlength={20}
                  placeholder="请输入昵称"
                  onFocus={() => {
                    this.setState({
                      showEnd: true,
                    });
                  }}
                  onInput={(e) => {
                    action.commonChange('main.defaultName', e.detail.value);
                  }}
                  onBlur={(e) => {
                    this.setState({
                      showEnd: false,
                    });
                    if (e.detail.value.length < 4) {
                      Taro.showToast({
                        title: '昵称至少输入4个字',
                        icon: 'none',
                      });
                      action.commonChange('main.defaultName', customer.name);
                      return;
                    }
                    action.submitName(e.detail.value);
                  }}
                ></Input>
                {this.state.showEnd && (
                  <View
                    className="closeNameIcon"
                    onClick={() => {
                      action.commonChange('main.customer.name', '');
                    }}
                  >
                    <AtIcon size={10} value="close" color="#fff" />
                  </View>
                )}
                {/* <Text className="con-item-infoBox-text">{customer.name}</Text> */}
                <Image className="con-item-infoBox-rightIcon" src={rightIcon} mode="widthFix" />
              </View>
            </View>
            <View className="con-item">
              <View className="con-item-label">会员号</View>
              <View className="con-item-infoBox">
                <Text className="con-item-infoBox-text margin52">{memberCardNum}</Text>
              </View>
            </View>
            <View className="con-item">
              <View className="con-item-label">会员类型</View>
              <View className="con-item-infoBox">
                <Text className="con-item-infoBox-text margin52">{memberName}</Text>
              </View>
            </View>
          </View>
          <View className="con">
            <View
              className="con-item"
              onClick={() => {
                Taro.navigateTo({
                  url: '/pages/package-I/expenseHistory/index',
                });
              }}
            >
              <View className="con-item-label">交易记录</View>
              <View className="con-item-infoBox">
                <Image className="con-item-infoBox-rightIcon" src={rightIcon} mode="widthFix" />
              </View>
            </View>
          </View>
          <View className="con">
            <View
              className="con-item"
              onClick={() => {
                Taro.downloadFile({
                  url: 'https://credit.sxhyun.com/userAgreement.docx',
                  success: function (res) {
                    const filePath = res.tempFilePath;
                    Taro.openDocument({
                      filePath: filePath,
                      success: function (res) {},
                    });
                  },
                });
              }}
            >
              <View className="con-item-label">用户协议</View>
              <View className="con-item-infoBox">
                <Image className="con-item-infoBox-rightIcon" src={rightIcon} mode="widthFix" />
              </View>
            </View>
            {/* 隐私政策暂时去掉 */}
            {/* <View className="con-item">
              <View className="con-item-label">隐私政策</View>
              <View className="con-item-infoBox">
                <Image className="con-item-infoBox-rightIcon" src={rightIcon} mode="widthFix" />
              </View>
            </View> */}
          </View>
        </View>
        <Text className="tip">小主，个人信息在这里查看哦～</Text>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
